<template>
	<view class="orderDetail">
		<!-- <view :class="device=='ios'?'ios_pageTitle':'and_pageTitle'">
			<view class="statusBar"></view>
			<view class="pageTitle dFlex jBetween_aCenter">
				<view class="backIcon imgPublic" @tap.stop='back'>
					<image src="https://kmbs-ytk.oss-cn-qingdao.aliyuncs.com/cMini/backIcon2.png" mode="widthFix"></image>
				</view>
				<view class="title" v-if="datas.status == '0'">等待买家付款</view>
				<view class="title" v-if="datas.status == '10'">买家已付款</view>
				<view class="title" v-if="datas.status == '20'">卖家已发货</view>
				<view class="title" v-if="datas.status == '30'">已收货</view>
				<view class="title" v-if="datas.status == '40'">售后中</view>
				<view class="title" v-if="datas.status == '50'">售后结束</view>
				<view class="title" v-if="datas.status == '60'">交易完成</view>
				<view class="title" v-if="datas.status == '90'">已关闭</view>
				<view class="backIcon imgPublic"></view>
			</view>
		</view> -->
		<view class="add dFlex jStart_aStart">
			<view class="addIcon imgPublic">
				<image src="https://kmbs-ytk.oss-cn-qingdao.aliyuncs.com/cMini/addIcon.png" mode="widthFix"></image>
			</view>
			<view class="selAdd">
				<view class="userInfo">
					<text class="username">{{datas.address_json.receiver}}</text>
					<text class="tel">{{datas.address_json.phone}}</text>
				</view>
				<view class="showAdd">{{datas.address_json.address + datas.address_json.address_detail}}</view>
			</view>
		</view>
		<view class="part">
			<view class="content">
				<view class="shangpin dFlex jStart_aStart" v-for="(shop,idx) in datas.ordergoods" :key='idx'>
					<view class="shopImg imgPublic">
						<image :src="shop.goods.main_img" mode="widthFix"></image>
					</view>
					<view class="other">
						<view class="dFlex jBetween_aStart">
							<view class="shopName">{{shop.goods.title}}</view>
							<view class="user dFlex jStart_aCenter">
								<text class="rmb">￥</text>
								<text class="price">{{shop.total_money}}</text>
							</view>
						</view>
						<view class="selSpec dFlex jBetween_aCenter">
							<view class="spec" v-if="shop.goods_attr">规格：{{shop.goods_attr}}</view>
							<view class="spec" v-else-if="!shop.goods_attr && shop.goods.default_attr">规格：{{shop.goods.default_attr}}</view>
							<view class="spec" v-else>规格：默认规格</view>
							<text>x{{shop.goods_num}}</text>
						</view>
						<view class="opBtns dFlex jStart_aCenter">
							<view class="btn" v-if="shop.trade_status >= '10' && shop.trade_status <= '30'" @tap='saleAfter(datas.id,shop.id,2)'>申请售后</view>
							<view class="btn pay" v-if="shop.trade_status == '20'" @tap="sureGetShop(shop)">确认收货</view>
							<view class="btn pay" v-if="shop.trade_status == '30'" @tap="commentShop(shop)">评价商品</view>
							<view class="btn" v-if="shop.trade_status == '40' || shop.trade_status == '50'" @tap.stop='saleAfterDetail(datas.id,shop.id,shop.source)'>售后详情</view>
						</view>
					</view>
				</view>
			</view>
			<view class="config">
				<view class="line dFlex jBetween_aCenter">
					<view class="lineTit">商品总额</view>
					<view class="lineVal">{{datas.total_price?datas.total_price:'0.00'}}</view>
				</view>
				<view class="line dFlex jBetween_aCenter">
					<view class="lineTit">运费</view>
					<view class="lineVal">{{datas.ship_money?datas.ship_money:'0.00'}}</view>
				</view>
				<!-- <view class="line dFlex jBetween_aCenter">
					<view class="lineTit">优惠</view>
					<view class="lineVal">/view>
				</view> -->
				<view class="line dFlex jBetween_aCenter">
					<view class="lineTit">{{datas.is_pay==0?'待付款':"实付款"}}</view>
					<view class="lineVal showPrice">{{datas.total_money}}</view>
				</view>
			</view>
		</view>
		<view class="coupon" v-if="datas.use_coupon && datas.use_coupon.length">
			<view class="cpList">
				<view class="cpOne dFlex jBetween_aCenter" v-for="(item,index) in datas.use_coupon" :key='index'>
					<view class="cpTit">{{item.title}}</view>
					<text class="amount" v-if="item.type!=4"><text>{{item.sub_price}}</text>元</text> 
					<text class="amount" v-else><text>{{item.discount}}</text>折</text>
				</view> 
			</view>
			<view class='result dFlex jEnd_aCenter'>共优惠<text>{{(parseFloat(datas.total_price) + parseFloat(datas.ship_money) - parseFloat(datas.total_money)).toFixed(2)}}</text>元</view>
		</view>
		<view class="orderLine">
			<view class="line dFlex jBetween_aCenter">
				<view class="lineTit">订单状态</view>
				<view class='lineVal dFlex jEnd_aCenter'>
					<view v-if="datas.status == '0'">待付款</view>
					<view v-if="datas.status == '10'">待发货</view>
					<view v-if="datas.status == '20'">待收货</view>
					<view v-if="datas.status == '30'">待评价</view>
					<view v-if="datas.status == '40'">售后中</view>
					<view v-if="datas.status == '50'">售后结束</view>
					<view v-if="datas.status == '60'">交易完成</view>
					<view v-if="datas.status == '90'">已关闭</view>
				</view>
			</view>
			<view class="line dFlex jBetween_aCenter">
				<view class="lineTit">订单编号</view>
				<view class='lineVal dFlex jEnd_aCenter'>
					<text>{{datas.orderno}}</text>
					<text class="copy" @tap='copy'>复制</text>
				</view>
			</view>
			<view class="line dFlex jBetween_aCenter">
				<view class="lineTit">下单时间</view>
				<view class='lineVal dFlex jEnd_aCenter'>
					<text>{{datas.createtime}}</text>
				</view>
			</view>
			<view class="line dFlex jBetween_aCenter">
				<view class="lineTit">支付时间</view> 
				<view class='lineVal dFlex jEnd_aCenter'>
					<text>{{datas.pay_time}}</text>
				</view>
			</view>
			<view class="line dFlex jBetween_aCenter">
				<view class="lineTit">支付方式</view>
				<view class='lineVal dFlex jEnd_aCenter'>
					<text>{{datas.pay_type == 'wxpay'?"微信支付":'余额支付'}}</text>
				</view>
			</view>
		</view>
		<view class="seat"></view>
		<button open-type="contact" hover-class="none" class="service imgPublic">
			<image src="../static/images/service.png" mode="widthFix"></image>
		</button>
		<view :class="['opbtn','dFlex','jEnd_aCenter',device == 'ios'?'ios_safe':'']">	
		
			<view class="btn" v-if="datas.status == '0'" @tap.stop='cancelOrder'>取消订单</view>
			<view class="buyNow" v-if="datas.status == '0'" @tap.stop='payOrder'>立即支付</view>
			<view class="btn" v-if="datas.status == '20'" @tap.stop='lookWuliu'>查看物流</view>
			<view class="buyNow" v-if="datas.status == '20'" @tap.stop='sureGet'>确认收货</view>
			
			
			
		
			<!-- <view class="btn" v-if="datas.status == '90' || datas.status == '60' || datas.status == '50'" @tap.stop='delOrder'>删除订单</view> -->
			<!-- <view class="addCar" @tap='addCar' v-if="datas.status == '50' || datas.status == '60' || datas.status == '90'">加入购物车</view> -->
			<!-- <view class="buyNow" @tap='beforeOrder' v-if="datas.status == '50' || datas.status == '60' || datas.status == '90'">再次购买</view> -->
		</view>
	</view>
</template>

<script>
	import {
		orderList,cancelOrder,orderPay,confirmOrderGoods
	} from '@/tools/http.js';
	import {domain} from '@/tools/config.js';
	import tools from '@/tools/tools.js';
	export default {
		data() {
			return {
				orderId:'',
				datas:{},
				link:'',
			};
		},
		onLoad(e) {
			this.orderId = e.orderId;
		},
		onShow(){
			this.initData();
		},
		methods:{
			// 数据
			async initData(){
				let res = await orderList({
					ids:this.orderId
				});
				if(res){
					res[0].address_json = res[0].address_json?JSON.parse(res[0].address_json):{};
					res[0].createtime = tools.timestamptoData(res[0].createtime * 1000,1);
					res[0].pay_time = res[0].is_pay?tools.timestamptoData(res[0].pay_time * 1000,1):'';
					res[0].ordergoods.map((item2,index2)=>{
						var reg=/http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/;
						if(!reg.test(item2.goods.main_img)){
							item2.goods.main_img = item2.goods.main_img.startsWith('https')?item2.goods.main_img:domain+item2.goods.main_img;
						}
					})
					this.datas = res[0];
				}
			},
			// 申请售后
			saleAfter(orderId,orderDetailId,type){
				uni.navigateTo({
					url:'./saleAfter?order_id='+orderId+'&orderDetailId='+orderDetailId+'&type='+type
				})
			}, 
			// 支付订单
			async payOrder(){
				uni.showActionSheet({
					itemList:['微信支付','余额支付'],
					success: async (op) => {
						let res = await orderPay({
							oid:this.orderId,
							pay_type:op.tapIndex == '0' ? 'wxpay' : 'balance',
						});
						if(op.tapIndex == '0'){
							if(res){
								uni.requestPayment({
									provider:'wxpay',
									timeStamp:res.info.timeStamp,
									nonceStr:res.info.nonceStr,
									package:res.info.package,
									signType:res.info.signType,
									paySign:res.info.paySign,
									success: (pay) => {
										uni.showToast({
											title:'订单支付成功',
											icon:"success"
										})
										this.initData();
									},
									fail:(err)=>{
										console.log(err);
										uni.showToast({
											title:'取消支付',
											icon:"none"
										})
									}
								})
							}
						}else{
							if(res){
								uni.showToast({
									title:'订单支付成功',
									icon:"success"
								})
								this.initData();
							}
						}
					},
					fail:(err)=>{
						console.log(err);
						uni.showToast({
							title:'订单支付失败',
							icon:"none"
						})
					},
				})
			},
			// 订单确认收货
			sureGet(){
				uni.showModal({
					content:'确认已收到全部商品并检查无误',
					success: async (op) => {
						if(op.confirm){
							let res = await confirmOrderGoods({
								oid:this.orderId,
							});
							if(res){
								this.initData();
							}
						}
					}
				})
			},
			// 单个商品确认收货
			sureGetShop(shop){
				uni.showModal({
					content:'确认已收到该商品并检查无误',
					success: async (op) => {
						if(op.confirm){
							let res = await confirmOrderGoods({
								ogid:shop.id,
							});
							if(res){
								this.initData();
							}
						}
					}
				})
			},
			// 取消订单
			cancelOrder(){
				uni.showModal({
					content:'确定取消该订单？',
					success: async (op) => {
						if(op.confirm){
							let res = await cancelOrder({
								id:this.orderId
							})
							if(res){
								this.initData();
							}
						}
					}
				})
			},
			// 查看物流
			lookWuliu(line){
				uni.navigateTo({
					url:'./logistics?id='+this.datas.id,
				})
			},
			// 评价单品
			commentShop(line){
				uni.navigateTo({
					url:'./evaluate?ogid='+line.id
				})
			},
			
			
			
			
			
			
			// 查看售后详情
			saleAfterDetail(orderId,orderDetailId,type){
				uni.navigateTo({
					url:'./serveDetail?order_id='+orderId+'&orderDetailId='+orderDetailId+'&type='+(type?'1':'2')
				})
			},
			// 直接下单
			beforeOrder(){
				let shopInfo = [];
				this.datas.ordergoods.map((item,index)=>{
					shopInfo.push({
						id:item.goods_id,
						main_img:item.goods.main_img,
						title:item.goods.goods_title,
						count:item.goods_num,
						specName:item.goods_attr?item.goods_attr:'默认',
						specId:item.goods_attr_id?item.goods_attr_id:'',
						showPrice:item.goods_price,
					})
				})
				uni.redirectTo({
					url:'../seller/beforeOrder?status=1&shopInfo='+JSON.stringify(shopInfo),
				})
			},
			// 加入购物车
			addCar(){
				this.datas.ordergoods.map((item,index)=>{
					this.tool.getData('/api/mall/addShoppingCart',{
						goods_id:item.goods_id,
						goods_attr_id:item.goods_attr_id,
						num:item.goods_num
					}).then(res=>{
						if(res){
							if(index == this.datas.ordergoods.length-1){
								uni.showToast({
									title:'所有商品已添加到购物车',
									icon:"none"
								})
								setTimeout(()=>{
									uni.switchTab({
										url:'/pages/car'
									})
								},1650)
							}
						}
					}).catch(err=>{
						console.log(err);
					})
				})
			},
			
			// 删除订单
			delOrder(){
				uni.showModal({
					content:'确定删除该订单？',
					success: (op) => {
						if(op.confirm){
							this.tool.getData('/api/mall/deleteOrder',{
								id:this.datas.id,
							}).then(res=>{
								if(res){
									uni.showToast({
										title:"订单已删除",
										icon:"success"
									})
									setTimeout(()=>{
										uni.navigateBack({
											delta:1
										})
									},1650)
								}
							}).catch(err=>{
								console.log(err);
							})
						}
					}
				})
			},
			
			// 复制订单编号
			copy(){
				uni.setClipboardData({
					data:this.datas.orderno,
					success: () => {
						uni.showToast({
							title:'内容已复制',
							icon:"none"
						})
					}
				})
			},
			// 返回
			back(){
				uni.navigateBack({
					delta:1
				})
			},
			
		}
	}
</script>

<style lang="scss">
	page{
		background: #F6F6F6;
	}
	.orderDetail{
		width: 100%;
		padding-left: 12px;
		padding-right: 12px;
		box-sizing: border-box;
		.add{
			width: 100%;
			padding: 12px;
			box-sizing: border-box;
			background: white;
			border-radius: 8px;
			margin: 12px 0;
			.addIcon{
				width: 24px;
				height: 24px;
				margin-right: 4px;
			}
			.selAdd{
				flex: 1;
				.showAdd{
					font-size: 14px;
					margin-top: 8px;
					color:#666666;
				}
				.userInfo{
					font-size: 15px;
					.username{
						margin-right: 10px;
					}
				}
			}
			.unselAdd{
				flex: 1;
				font-size: 16px;
				color: #666666;
			}
			.rightIcon{
				width: 20px;
				height: 20px;
			}
		}
		.opbtn{
			width: 100%;
			padding:8px 16px;
			box-sizing: border-box;
			background: white;
			position:fixed;
			bottom:0;
			left:0;
			.addCar{
				padding: 8px 20px;
				border-radius: 40px;
				border:1px solid #3E8EF0;
				color:#3E8EF0;
				font-size:13px;
			}
			.buyNow{ 
				padding: 8px 20px;
				border-radius: 40px;
				border:1px solid #3E8EF0;
				background: #3e8ef0;
				color:white;
				font-size:13px;
				margin-left: 12px;
			}
			.btn{
				padding: 8px 20px; 
				border-radius: 40px;
				border:1px solid #D6D6D6;
				margin-right: 12px;
				font-size:13px;
			}
		}
		.service{
			width:44px;
			height:44px;
			position: fixed;
			right: 12px;
			bottom:30%;
		}
		.coupon{
			width: 100%;
			padding: 12px 12px 0;
			box-sizing: border-box;
			color: #666666;
			background: white;
			border-radius: 4px;
			overflow: hidden;
			margin-bottom: 12px;
			.cpList{
				width: 100%;
				.cpOne{
					width: 100%;
					line-height: 24px;
					.amount{
						text{
							color:#3E8EF0;
							display: inline-block;
							margin: 0 3px;
							font-size: 15px;
							font-weight: bold;
						}
					}
				}
			}
			.result{
				padding: 12px 0;
				text{
					color:#3E8EF0;
					display: inline-block;
					font-size: 15px;
					margin: 0 3px;
					font-weight: bold;
				}
			}
		}
		.orderLine{
			width: 100%;
			padding: 12px 12px 0;
			box-sizing: border-box;
			color: #666666;
			background: white;
			border-radius: 4px;
			overflow: hidden;
			margin-bottom: 20px;
			.line{
				margin-bottom: 12px;
				.lineVal{
					color: #333333;
				}
				.copy{
					display: inline-block;
					padding:2px 4px;
					margin-left: 10px;
					border: 1px solid #999999;
					border-radius: 4px;
				}
			}
		}
		.part{
			padding: 12px;
			box-sizing: border-box;
			border-radius: 4px;
			background: white;
			margin-bottom: 12px;
			.orderCount{
				width: 100%;
				padding:12px 0 0;
				font-weight: bold;
				box-sizing: border-box;
				.btns{
					width: auto;
					.btn{
						font-size: 12px;
						width: max-content;
						border-radius: 40px;
						color: #999999;
						border: 1px solid #D6D6D6;
						padding: 4px 12px;
						margin-left: 8px;
					}
					.pay{
						font-weight: 400;
						color: #3E8EF0;
						border-color: #3E8EF0;
					}
				}
				.pay{
					font-weight: bold;
				}
			}
			.config{
				// border-bottom: 1px solid #F5F6F7;
				.line{
					width: 100%;
					font-size: 14px;
					margin-bottom: 12px;
					.lineTit{
						color: #666666;
					}
					.showPrice{
						font-size: 18px;
						font-weight: bold;
						color: #EB0C0C;
					}
				}
				.line:last-child{
					margin:0;
				}
			}
			.shangpin{
				width: 100%;
				margin-bottom: 8px;
				.shopImg{
					width:80px;
					height: 80px;
					overflow: hidden;
					background: white;
					margin-right: 12px;
					border-radius: 8px;
				}
				.other{
					flex: 1;
					.shopName{
						font-size: 15px;
					}
					.user{
						font-size: 12px;
						color: #666666;
						margin-left:5px;
						.rmb{
							color: #333333;
						}
						.price{
							color: #333333;
							font-size: 14px;
							display: inline-block;
						}
					}
					.opBtns{
						margin-top: 8px;
						.btn{
							width: max-content;
							border: 1px solid #999999;
							color: #333333;
							padding: 3px 10px;
							font-size: 12px;
							border-radius: 50px;
							margin-right: 8px;
						}
						.pay{
							color: white;
							background:#3E8EF0;
							border:1px solid #3E8EF0;
						}
					}
					.selSpec{
						font-size: 12px;
						color: #999999;
						margin: 8px 0 4px;
					}
				}
			}
			.kecheng{
				width: 100%;
				border-bottom: 1px solid #F5F6F7;
				margin-bottom: 12px;
				.btns{
					margin: 12px 0;
					.tk{
						width: max-content;
						font-size:12px;
						color: #999999;
						line-height: 24px;
						padding: 0 10px;
						border-radius: 40px;
						border: 1px solid #D6D6D6;
					}
				}
				.orderTime{
					font-size: 12px;
					color: #999999;
				}
				.shopInfo{
					width:100%;
					margin-bottom: 12px;
					.base{
						flex: 1;
						.shopName{
							flex: 1;
						}
						.tags{
							line-height: 16px;
							font-size: 12px;
							padding: 0 4px;
							color: white;
							border-radius: 4px;
							background: #3E8EF0;
							margin-right: 8px;
						}
					}
					.price{
						font-size: 12px;
						color: #FF0000;
					}
				}
			}
		}
		.ios_pageTitle,.and_pageTitle{
			background: white;
			.pageTitle{
				.title{
					flex: 1;
					margin: 0 12px;
					text-align: left;
					font-weight: bold;
					font-size: 17px;
				}
			}
		}
	}
</style>
